import {Card} from "antd";
import Meta from "antd/es/card/Meta";
import {useNavigate} from "react-router-dom";

const ProductCategoryCard=({item})=>{
    const { id, name, imageUrl } = item;
    const navigate = useNavigate();

    const viewProduct = () => {
        console.log(id);
        navigate(`/subCategoryProduct/${id}`);
    };

    return (
        <Card
            style={{
            width:"100px",
            height:"100px",
            //border:"red 1px solid"
            }}
              hoverable
              onClick={viewProduct}
              cover={
                <img
                    src={imageUrl}
                    alt={name}
                    style={{
                        width:"100%",
                        height:"100%",
                        //margin:"10px auto",
                    }}
                />
            }>
            <Meta title={name} style={{fontSize:"12px"}}/>
        </Card>
    );
};
export default ProductCategoryCard;